<template>
	<view class="guide-index" v-if="show">
		<view class="block" :style="blockStyle">

		</view>
		<view class="" v-if="step === 1">
			<image class="step1" src="../../../static/guide-index/step1.png" mode=""></image>
			<image class="step1-line" src="../../../static/guide-index/stepline.png" mode=""></image>
			<view class="text-center text">
				点击查看设备管理及电量详情
			</view>
			<view class="btn" @click="nextStep">
				下一步（{{step }} / 6）
			</view>
		</view>
		<view class="" v-else-if="step === 2">
			<image class="step2" src="../../../static/guide-index/step2.png" mode="aspectFit"></image>
			<image class="step2-line" src="../../../static/guide-index/stepline2.png" mode=""></image>
			<view class="step2-text text">
				<view class="">
					当日综合健康评分
				</view>
				<view class="">
					向下滑动可查看详细健康数据
				</view>
			</view>
			<view class="btn" @click="nextStep">
				下一步（{{step }} / 6）
			</view>
		</view>
		<view class="" v-else-if="step === 3">
			<image class="step3" src="../../../static/guide-index/step3.png" mode=""></image>
			<image class="step3-line" src="../../../static/guide-index/stepline3.png" mode=""></image>
			<view class="step3-text text">
				<view class="">
					如果您的健康数据有异常,请在此反馈
				</view>
			</view>
			<view class="btn" @click="nextStep">
				下一步（{{step }} / 6）
			</view>
		</view>
		<view class="" v-else-if="step === 4">
			<image class="step4" src="../../../static/guide-index/step4.png" mode=""></image>
			<image class="step4-line" src="../../../static/guide-index/stepline4.png" mode=""></image>
			<view class="step4-text text">
				<view class="">
					健康戒指每天会根据佩戴时长
				</view>
				<view class="">
					及睡眠评分给出相应的奖励
				</view>
				<view class="">
					(佩戴戒指入睡,明日即可领取)
				</view>
			</view>
			<view class="btn" @click="nextStep">
				下一步（{{step }} / 6）
			</view>
		</view>
		<view class="" v-else-if="step === 5">
			<image class="step5" src="../../../static/guide-index/step5.png" mode=""></image>
			<image class="step5-line" src="../../../static/guide-index/stepline5.png" mode=""></image>
			<view class="step5-text text">
				<view class="">
					完成新人七日挑战获得丰厚的元气奖励
				</view>
			</view>
			<view class="btn" @click="nextStep">
				下一步（{{step }} / 6）
			</view>
		</view>
		<view class="" v-else-if="step === 6">
			<image class="step6" src="../../../static/guide-index/step6.png" mode=""></image>
			<image class="step6-line" src="../../../static/guide-index/stepline6.png" mode=""></image>
			<view class="step6-text text">
				<view class="">
					点击查看邀请奖励及元气详情
				</view>
			</view>
			<view class="btn" @click="close">
				下一步（{{step }} / 6）
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	export default {
		computed: {
			...mapGetters('ringDataManage', ["domDataUsedByGuideConfig"]),
			blockStyle() {
				const step = this.step;
				const map = {
					1: 0,
					2: 80,
					3: 0,
					4:500,
					5:450,
					6:100,
				}
				if (map[step]) {

					return {
						height: map[step] + 'rpx'
					}
				}
				const map2 = {
					4: this.domDataUsedByGuideConfig.dailyTask
				}

				return {
					height: map2[step] + 'px'
				}
			}
		},
		data() {
			return {
				step: 1,
				show: true
			}
		},
		methods: {
			nextStep() {
				this.step += 1
			},
			open() {
				this.show = true
			},
			close() {
				this.show = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.guide-index {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 900;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.8);
		padding: 16rpx 32rpx;

		image {
			display: block;
		}

		.step1 {
      position: absolute;
      top: 40rpx;
      left: 0;
			width: 90rpx;
			height: 90rpx;
			position: relative;
			z-index: 10;
		}

		.step1-line {
			width: 86rpx;
			height: 37rpx;
			margin-left: 85rpx;
			margin-top: 0;
			margin-bottom: 0;
		}

		.step2 {
			width: 100%;
			height: 400rpx;
		}

		.step2-line {
			margin-left: 200rpx;
			width: 82rpx;
			height: 107rpx;
		}

		.step2-text {
			padding-left: 120rpx;
		}

		.step3 {
			width: 90rpx;
			height: 90rpx;
			margin-left: 52rpx;
		}

		.step3-line {
			width: 44rpx;
			height: 104rpx;
			margin-left: 97rpx;
		}

		.step3-text {
			margin-left: 182rpx;
			margin-top: -60rpx;
		}
		.step4 {
			width: 100%;
			height: 180rpx;
		}
		
		.step4-line {
			margin-left: 80rpx;
			width: 82rpx;
			height: 107rpx;
		}
		
		.step4-text {
			padding-left: 165rpx;
		}
	.step5 {
			width: 100%;
			height: 230rpx;
		}
		
		.step5-line {
			margin-left: 80rpx;
			width: 82rpx;
			height: 107rpx;
		}
		
		.step5-text {
			padding-left: 165rpx;
		}
		.step6 {
			width: 90rpx;
			height: 90rpx;
			position: absolute;
			z-index: 10;
			right: 40rpx;
			top: 60rpx;
			}
			
			.step6-line {
			width: 96rpx;
			height: 48rpx;
			position: absolute;
			z-index: 10;
			right: 0;
			top: 140rpx;
			margin-right: 120rpx;
			}
			.step6-text {
				text-align: center;
			
			}
		.text {
			color: white;
			font-size: 32rpx;
			font-weight: 500;
		}

		.btn {
			text-align: center;
			color: white;
			width: 300rpx;
			height: 66rpx;
			line-height: 66rpx;
			border-radius: 20rpx;
			background: rgba(25, 82, 248, 1);
			display: block;
			font-size: 28rpx;
			font-weight: 500;
			color: white;
			margin: auto;
			margin-top: 26rpx;
		}
	}
</style>